<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文档水印系统 - HeroJe</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
</head>

<body class="layui-form" style="background-color:#eee;padding: 20px;">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>文档水印系统</legend>
</fieldset>

<div class="layui-upload">
  <div class="layui-upload-list">
    <img class="layui-upload-img" style="height:300px;" src="/static/demo.jpg" id="showing"/>
  </div>
  <div class="layui-upload-list">
    <button class="layui-btn" id="upload_img">选取图像</button>
  </div>
  <form class="layui-form" lay-filter="imgInfo">
      <div class="layui-form-item">
          <label class="layui-form-label">水印内容</label><div class="layui-input-block">
              <input class="layui-input" name="content" type="text" autocomplete="off" id="wm_content" required lay-verify="required" placeholder="请输入水印内容"/>
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">水印类型</label><div class="layui-input-block">
              <input name="wm_type" title="不可见水印" type="radio" value="1" checked />
              <input name="wm_type" title="常规水印" type="radio" value="0" />
          </div>
      </div>
      <button class="layui-btn" lay-filter="upload_form" lay-submit>添加水印</button>
      <button class="layui-btn" id="download_wm" hidden>
        <a href="/data/demo.jpg" download="x">水印图像下载</a>
      </button>
  </form>
</div>

<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['upload', "form"], function(data){
  var $ = layui.jquery
  ,upload = layui.upload
  ,form = layui.form;

  $("#download_wm").hide();

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#upload_img'
    ,url: '/img'
    // ,data: form.val("imgInfo")
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#showing').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      $("#download_wm").hide();
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });

  form.on('submit(upload_form)', function(data){
    console.log(data.field)
    $.post('/form',
      data.field,
      function(result){
        console.log(result);
        if (result.status) {
            layer.msg("已成功添加水印");
            console.log(result.url);
            // 下载图像
            $("#download_wm>a").attr({
              href: result.url,
              download: result.url
            });
            $("#download_wm").show();
        } else {
            alert("Failed: " + result.reason);
            $("#download_wm").hide();
        }
    })
    return false; // 这里是拦截layui自带的提交
  });

});
</script>
</body>
</html>